<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素拖入</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .content {
            width: 100%;
            height: 800px;
            display: flex;
        }

        .menu {
            width: 10%;
            height: 100%;
            /* line-height: 150px; */
            background-color: #00000030;
            display: flex;
            justify-content: center;
        }

        #com,
        #db {
            text-align: center;
            height: 95px;
            width: 60px;
            margin: 30px 10px 0px;
        }

        #com p,
        #db p {
            text-align: center;
            margin: 5px 0px;
        }

        .canvas {
            width: 90%;
            height: 100%;
            background-color: cyan;
            border: 1px solid pink;
            position: relative;
        }

        .item {
            display: none;
            position: absolute;
            top: 0px;
            left: 0px;
        }

        .item p {
            text-align: center;
            margin: 5px 0px;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="menu">
            <div id="com" >
                <img src="../imges/com.png" alt="电脑">
                <p>电脑</p>
            </div>
            <div id="db">
                <img src="../imges/db.png" alt="数据库">
                <p>数据库</p>
            </div>
        </div>
        <div class="canvas">

            <div class="item">
                <img src="../imges/db.png">
                <p>数据库</p>
            </div>

        </div>

    </div>

    <script>

        $(() => {
            // source-div
            // $('#db').on('dragstart', (e) => {
            //     console.log('drag start');
            // });
            // $('#db').on('drag', (e) => {
            //     // console.log('drag ing');
            // });
            // $('#db').on('dragend', (e) => {
            //     console.log('drag end');
            // });

            // target-div
            $('.canvas').on('dragenter', (e) => {
                console.log('drag enter');
            });
            $('.canvas').on('dragleave', (e) => {
                console.log('drag leave');
            });
            $('.canvas').on('dragover', (e) => {
                e.preventDefault();
            });

            // 可理解为在目标对象内松手时触发。

            $('.canvas').on('drop', (e) => {
                const o = {
                    left: e.offsetX,
                    top: e.offsetY,
                };

                $('.item').css({
                    top: o.top,
                    left: o.left,
                    display: 'block',
                });
            });

            $('.canvas').on('drop', (e) => {
                const o = {
                    left: e.offsetX,
                    top: e.offsetY,
                };

                $('.item').css({
                    top: o.top,
                    left: o.left,
                    display: 'block',
                });
            });



        });
    </script>
</body>

</html>